import React from 'react';
import { increment, decrement } from '../redux/action';

class App extends React.Component {

  // 点击时将select里面的值相累加
  increment = () => {
    // 获取<option value="1">1</option>里面的value值
    const num = this.select.value * 1;
    this.props.store.dispatch(increment(num));
  };

  // 点击时将select里面的值相减
  decrement = () => {
    const num = this.select.value * 1;
    this.props.store.dispatch(decrement(num));
  };

  //点击时将select里面奇数的值相加
  incrementOfOdd = () => {
    const num = this.select.value * 1;
    const state = this.props.store.getState();

    //奇数时
    if (state % 2 === 1) {
      this.props.store.dispatch(increment(num));
    }
  };

  //点击时将select里面值延迟相加
  incrementDelay = () => {
    const num = this.select.value * 1;

    setTimeout(() => {
      this.props.store.dispatch(increment(num));
    }, 1000);
  };

  render() {
    //获取最新的state数据
    const state = this.props.store.getState();

    return (
      <div>
        <h1>Hello React: {state}</h1>
        {/* 通过ref找到value的值 */}
        <select ref={(select) => (this.select = select)}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
        &nbsp;
        <button onClick={this.increment}>+</button>&nbsp;
        <button onClick={this.decrement}>-</button>&nbsp;
        {/* 遇到奇数增值 */}
        <button onClick={this.incrementOfOdd}>incrementOfOdd</button>&nbsp;
        <button onClick={this.incrementDelay}>incrementDelay</button>
      </div>
    );
  }
}

export default App;